<template>
  <div class="app_a">
    <Header/>
    <div class="backorg">
      <div class="longe"></div>
      <div class="banna">
        <div class="banna1">
          <img src="@/assets/img/eb6d88d9b71b230c3e7fc8bb1e2151a.png" alt="">
        </div>
        <div class="banna2">
          <img src="@/assets/img/744d11d9d3c4f3d0e4efd82f88c44fe.png" alt="">
        </div>
        <div class="banna3">
          <img src="@/assets/img/26089c28c041873f38f8c28d41f09fe.png" alt="">
        </div>
      </div>
      <div class="classlist">
        <div class="list_img"><img src="@/assets/img/fn.png" alt=""></div>
        <div class="list_h"><router-link to="/experience">正在进行</router-link> </div>
        <div class="list_h"><router-link to="/experience1">即将上新</router-link> </div>
        <div class="list_h"><router-link to="/experience2">往期回顾</router-link> </div>
      </div>
      <div class="shangpinglist">
        <div class="wdlisocn">

          <div class="list">
            <router-link to="/details22"><div class="listimg"><img src="@/assets/img/aa.png" alt=""></div></router-link>
            <div class="listtxt">
              <div class="lss">
                <router-link to="/details22"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓</h4></router-link>
                <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                <p>已申请：1562人</p>
                <p>活动时间：2019.11.4-2019.11.9</p>
                <div class="afafafaf"><img src="@/assets/img/a2.png" alt=""></div>
                <div class="flexzy adww">
                  
                  <router-link to="/details22"><div class="mianfshqin">查看详情</div></router-link>
                 
                </div>
              </div>
            </div>
          </div>
          <div class="list">
            <router-link to="/details22"><div class="listimg"><img src="@/assets/img/ww.png" alt=""></div></router-link>
            <div class="listtxt">
              <div class="lss">
                <router-link to="/details22"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓</h4></router-link>
                <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                <p>已申请：1562人</p>
                <p>活动时间：2019.11.4-2019.11.9</p>
                <div class="afafafaf"><img src="@/assets/img/a2.png" alt=""></div>
                <div class="flexzy adww">
                  
                  <router-link to="/details22"><div class="mianfshqin">查看详情</div></router-link>
                 
                </div>
              </div>
            </div>
          </div>
          <div class="list">
            <router-link to="/details22"><div class="listimg"><img src="@/assets/img/ee.png" alt=""></div></router-link>
            <div class="listtxt">
              <div class="lss">
                <router-link to="/details22"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓</h4></router-link>
                <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                <p>已申请：1562人</p>
                <p>活动时间：2019.11.4-2019.11.9</p>
                <div class="afafafaf"><img src="@/assets/img/a2.png" alt=""></div>
                <div class="flexzy adww">
                  
                  <router-link to="/details22"><div class="mianfshqin">查看详情</div></router-link>
                 
                </div>
              </div>
            </div>
          </div>
          <div class="list">
            <router-link to="/details22"><div class="listimg"><img src="@/assets/img/rr.png" alt=""></div></router-link>
            <div class="listtxt">
              <div class="lss">
                <router-link to="/details22"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓</h4></router-link>
                <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                <p>已申请：1562人</p>
                <p>活动时间：2019.11.4-2019.11.9</p>
                <div class="afafafaf"><img src="@/assets/img/a2.png" alt=""></div>
                <div class="flexzy adww">
                  
                  <router-link to="/details22"><div class="mianfshqin">查看详情</div></router-link>
                 
                </div>
              </div>
            </div>
          </div>
                    <div class="list">
            <router-link to="/details22"><div class="listimg"><img src="@/assets/img/aa.png" alt=""></div></router-link>
            <div class="listtxt">
              <div class="lss">
                <router-link to="/details22"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓</h4></router-link>
                <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                <p>已申请：1562人</p>
                <p>活动时间：2019.11.4-2019.11.9</p>
                <div class="afafafaf"><img src="@/assets/img/a2.png" alt=""></div>
                <div class="flexzy adww">
                  
                  <router-link to="/details22"><div class="mianfshqin">查看详情</div></router-link>
                 
                </div>
              </div>
            </div>
          </div>
          <div class="list">
            <router-link to="/details22"><div class="listimg"><img src="@/assets/img/ww.png" alt=""></div></router-link>
            <div class="listtxt">
              <div class="lss">
                <router-link to="/details22"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓</h4></router-link>
                <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                <p>已申请：1562人</p>
                <p>活动时间：2019.11.4-2019.11.9</p>
                <div class="afafafaf"><img src="@/assets/img/a2.png" alt=""></div>
                <div class="flexzy adww">
                  
                  <router-link to="/details22"><div class="mianfshqin">查看详情</div></router-link>
                 
                </div>
              </div>
            </div>
          </div>
          <div class="list">
            <router-link to="/details22"><div class="listimg"><img src="@/assets/img/ee.png" alt=""></div></router-link>
            <div class="listtxt">
              <div class="lss">
                <router-link to="/details22"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓</h4></router-link>
                <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                <p>已申请：1562人</p>
                <p>活动时间：2019.11.4-2019.11.9</p>
                <div class="afafafaf"><img src="@/assets/img/a2.png" alt=""></div>
                <div class="flexzy adww">
                  
                  <router-link to="/details22"><div class="mianfshqin">查看详情</div></router-link>
                 
                </div>
              </div>
            </div>
          </div>
          <div class="list">
            <router-link to="/details22"><div class="listimg"><img src="@/assets/img/rr.png" alt=""></div></router-link>
            <div class="listtxt">
              <div class="lss">
                <router-link to="/details22"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓</h4></router-link>
                <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                <p>已申请：1562人</p>
                <p>活动时间：2019.11.4-2019.11.9</p>
                <div class="afafafaf"><img src="@/assets/img/a2.png" alt=""></div>
                <div class="flexzy adww">
                  
                  <router-link to="/details22"><div class="mianfshqin">查看详情</div></router-link>
                 
                </div>
              </div>
            </div>
          </div>
                    <div class="list">
            <router-link to="/details22"><div class="listimg"><img src="@/assets/img/aa.png" alt=""></div></router-link>
            <div class="listtxt">
              <div class="lss">
                <router-link to="/details22"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓</h4></router-link>
                <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                <p>已申请：1562人</p>
                <p>活动时间：2019.11.4-2019.11.9</p>
                <div class="afafafaf"><img src="@/assets/img/a2.png" alt=""></div>
                <div class="flexzy adww">
                  
                  <router-link to="/details22"><div class="mianfshqin">查看详情</div></router-link>
                 
                </div>
              </div>
            </div>
          </div>
          <div class="list">
            <router-link to="/details22"><div class="listimg"><img src="@/assets/img/ww.png" alt=""></div></router-link>
            <div class="listtxt">
              <div class="lss">
                <router-link to="/details22"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓</h4></router-link>
                <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                <p>已申请：1562人</p>
                <p>活动时间：2019.11.4-2019.11.9</p>
                <div class="afafafaf"><img src="@/assets/img/a2.png" alt=""></div>
                <div class="flexzy adww">
                  
                  <router-link to="/details22"><div class="mianfshqin">查看详情</div></router-link>
                 
                </div>
              </div>
            </div>
          </div>
          <div class="list">
            <router-link to="/details22"><div class="listimg"><img src="@/assets/img/ee.png" alt=""></div></router-link>
            <div class="listtxt">
              <div class="lss">
                <router-link to="/details22"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓</h4></router-link>
                <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                <p>已申请：1562人</p>
                <p>活动时间：2019.11.4-2019.11.9</p>
                <div class="afafafaf"><img src="@/assets/img/a2.png" alt=""></div>
                <div class="flexzy adww">
                  
                  <router-link to="/details22"><div class="mianfshqin">查看详情</div></router-link>
                 
                </div>
              </div>
            </div>
          </div>
          <div class="list">
            <router-link to="/details22"><div class="listimg"><img src="@/assets/img/rr.png" alt=""></div></router-link>
            <div class="listtxt">
              <div class="lss">
                <router-link to="/details22"><h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓</h4></router-link>
                <div class="flexzy"><p>市场指导价：99元/套</p><p>活动名额：20人</p></div>
                <p>已申请：1562人</p>
                <p>活动时间：2019.11.4-2019.11.9</p>
                <div class="afafafaf"><img src="@/assets/img/a2.png" alt=""></div>
                <div class="flexzy adww">
                  
                  <router-link to="/details22"><div class="mianfshqin">查看详情</div></router-link>
                 
                </div>
              </div>
            </div>
          </div>
        </div>        
      </div>
    </div>

    <Footer/>
  </div>
</template>
<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
export default {
    name: 'guessing',
    components: { 
      Header,
      Footer
    },
    data () {
      return {
        isActive2:true 
      }
    }
}
</script>
<style scoped>
.backorg {
  background-color: #f06048;
  height: 2000px;
}
.app_a  /deep/ .ist_l .oueng_iwn:nth-child(2){
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
.longe {
  height: 20px;
}
.banna {
  width: 1200px;
  height: 268px;
  margin: 0 auto;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
}  
.banna img {
  height: 248px;
  width: 380px;
  transition: all .5s;
}
.banna img:hover {
  transform:scale(1.04);
}
.banna1 {
  height: 248px;
  width: 380px;
  margin: 10px 0 0 16px;

	border-radius: 16px;
} 
.banna1 img {
  height: 248px;
  width: 380px;
}
.banna2 {
  height: 248px;
  width: 380px;
  margin: 10px 0px 0 10px;
	border-radius: 16px;
} 
.banna3 {
  height: 248px;
  width: 380px;
  margin: 9px 18px 0 11px;
	border-radius: 16px;
} 
.classlist {
  width: 1200px;
  height: 60px;
  margin: 25px auto;
  display: flex;
  justify-content: space-between;
}
.classlist .list_img {
  width: 90px;
	height: 60px;
	background-color: #efc8c7;
}
.classlist .list_img img{
  width: 90px;
	height: 60px;
}
.classlist .list_h {
	width: 370px;
	line-height:60px;
	border: solid 1px #a0a0a0;
  text-align: center;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
} 
.shangpinglist{
  width: 1200px;
  height: 1600px;
  margin: -25px auto; 
  background-color: #eee;
}
.wdlisocn{
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
.list{
  height: 389px;
  width: 283px;
  margin: 12px 0px 0px 10px;
}
.listimg{
  width: 283px;
  height: 224px;
}
.listtxt{
  width: 283px;
  height: 160px;
  background-color: #ffffff;
  box-shadow: 0px 3px 9px 0px rgba(65, 65, 65, 0.17);
}
.listtxt .lss{
  width: 217px;
  height: 130px;
  margin: 0 auto;
}
.listtxt .lss h4 {
  font-family: SourceHanSansCN-Regular;
  font-size: 15px;
  color: #313131;
  padding-top: 12px;
  padding-bottom: 5px;
}
.listtxt .lss p {
  font-size: 12px;
  color: #959595;
  line-height: 18px;
}
.flexzy {
  display: flex;
  justify-content: space-between ;
}
.adww{
    margin-top: -13px;
}
.mianfshqin {
    color: #f06048;
    font-size: 16px;
    text-align: center;
    border: 1px solid #f06048;
    border-radius: 14px;
    width: 134px;
    	height: 30px;
    line-height: 30px;
    margin-left: 14px;
}
.mianfshqin:hover {
    width: 134px;
	height: 30px;
	background-color: #f06048;
	border-radius: 15px;
  color: #fff
}
.list_h a{
  width: 370px;
  line-height: 60px;
  color: #fff;
  display: inline-block;
}
.list_h a:hover {
  color: #fff;
  background-color: #610800
}
.list_h .router-link-exact-active {
  color: #fff;
  background-color: #610800
}
.afafafaf{
  position: relative;
  top: -120px;
  left: 192px;
}


</style>